﻿{% extends "admin/cms_base.html" %}
{% from "common/_macro.html" import static %}
{% block head %}
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="{{ static("admin/js/cms_banner.js") }}"></script>
    <style>
    .item img{
        width: 100%;
    }
			.file-box{
				display: inline-block;
				position: relative;
				height: 30px;
                line-height: 30px;
                border-radius: 5%;
				overflow: hidden;
				color:#fff;
				background-color: #5dc2f1;
			}
            .file-btn:hover{cursor: pointer;}
			.file-btn{
                border-radius: 5%;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
    			left: 0;
    			outline: none;
    			background-color: transparent;
    			filter:alpha(opacity=0);
				-moz-opacity:0;
				opacity: 0;
			}
    .cms-banner{
        border-radius: 10px;
        overflow: hidden;
        height: 250px;
        width: 100%
    }
    </style>
{% endblock %}

{% block page_title %}

{% endblock %}

{% block content %}
    <!--具体内容盒子               -->
    <div class="banner-contener">

    </div>
    <div class="col-md-5">
        <div id="carousel-example-generic" class="carousel slide cms-banner" data-ride="carousel">
        <!-- Indicators -->
            <ol class="carousel-indicators">
                {% for banner in igs%}
                   
                {% if loop.index0 == 0 %}
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    {% else %}
                    <li data-target="#carousel-example-generic" data-slide-to="{{ loop.index }}"></li>
                {% endif %}
                {% endfor %}
            </ol>

        <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
            {% for ig in igs %}
                {% if loop.first %}
                    <div class="item active">
                        <a href="{{ ig.link_url }}">
                            <img src="{{ ig.img_url}}">
                        </a>
                        <div class="carousel-caption">
                            {{ ig.content }}
                        </div>
                    </div>
                    {% else %}
                <div class="item">
                <a href="{{ ig.link_url }}">
                            <img src="{{ ig.img_url}}">
                        </a>
                <div class="carousel-caption">
                    {{ ig.content }}
                </div>
            </div>
                {% endif %}
            {% endfor %}
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        </div>
    </div>
    <div class="col-md-12">
                    <blockquote class="layui-elem-quote news_search">
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-normal newsAdd_btn" id="add-banner-btn" data-toggle="modal" data-target="#banner-dialog">添加banner</a>
                    </div>

                </blockquote>

{#    模态对话框#}

<!-- Modal -->
<div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">轮播图</h4>
      </div>
      <div class="modal-body">
          <form action="" class="form-horizontal">
              <div class="form-group">
                  <label class="col-sm-2 control-label">图片：</label>
                  <div class="col-sm-7">
                      <input type="text" class="form-control" name="image_url" placeholder="轮播图图片">
                  </div>
                  <div  class="col-sm-2 file-box" id="add-bbb">
                      <input type="file" class="col-sm-2 file-btn" id="file">添加图片
                  </div>
                  <button class="ui primary loading button" id="loder" style="display: none">上传中</button>
              </div>
              <div class="form-group">
                  <label class="col-sm-2 control-label">内容：</label>
                  <div class="col-sm-10">
                      <textarea class="form-control" rows="3" id="banner-content"></textarea>
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-2 control-label">跳转：</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" name="link_url" placeholder="跳转链接">
                  </div>
              </div>
              <div class="form-group">
                  <label class="col-sm-2 control-label">权重：</label>
                  <div class="col-sm-10">
                      <input type="number" class="form-control" name="priority" placeholder="优先级">
                  </div>
              </div>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="save-banner-btn" data-type="abanner-save">保存</button>
      </div>
    </div>
  </div>
</div>
{#    模态对话框结束#}

        <table class="layui-table">
            <thead>
                <tr>
                    <th>权重</th>
                    <th>图片</th>
                    <th>跳转连接</th>
                    <th>内容</th>
                    <th>更新时间</th>
                    <th>更新人</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            {% for ig in igs %}
                <tr>
                    <td>{{ ig.weight }}
                    </td>
                    <td class="banner-img-box">
                        <img src="{{ ig.img_url }}">
                    </td>
                    <td><a href="{{ ig.link_url }}">{{ ig.link_url }}</a></td>
                    <td>{{ ig.content }}</td>
                    <td>{{ ig.create_time }}</td>
                    <td>{{ ig.username }}</td>
                    <td>
                        <button class="layui-btn layui-btn-xs edit-btn" data-edit-id="{{ ig.id }}"
                        data-img_url="{{ ig.img_url }}" data-url="{{ ig.link_url }}" data-content="{{ ig.content }}"
                        data-weight="{{ ig.weight }}"
                        >
                            <i class="layui-icon layui-icon-edit" ></i>编辑
                        </button>
                        <button class="layui-btn layui-btn-danger  layui-btn-xs del-btn" data-del-id="{{ ig.id }}">
                            <i class="layui-icon layui-icon-delete"></i>删除
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <!--banner结束-->
    <!--具体内容盒子结束-->
{% endblock %}


